<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
<style>
    .example-animate-container {
        background: #ececec;
        list-style:none;
        margin:0;
        padding:0 10px;
    }

    .animate-repeat {
        line-height:40px;
        list-style:none;
        /*box-sizing:border-box;*/
        border-bottom: 1px solid white;
        -webkit-transition: 1s linear all;
        transition: 1s linear all;
    }

    .animate-repeat.ng-move,
    .animate-repeat.ng-enter,
    .animate-repeat.ng-leave {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
    }

    .animate-repeat.ng-leave.ng-leave-active,
    .animate-repeat.ng-move,
    .animate-repeat.ng-enter {
        opacity:0;
        max-height:0;
    }

    .animate-repeat.ng-leave,
    .animate-repeat.ng-move.ng-move-active,
    .animate-repeat.ng-enter.ng-enter-active {
        opacity:1;
        max-height:40px;
    }

    /**
     * Stagger Leave (hide) animation
     */
    .animate-repeat.ng-leave-stagger {
        /* this will have a 100ms delay between each successive leave animation */
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;

        /* in case the stagger doesn't work then these two values
         must be set to 0 to avoid an accidental CSS inheritance */
        -webkit-transition-duration: 0s;
        transition-duration: 0s;
    }

    /**
     * Stagger ENTER ANIMATION
     */
    .animate-repeat.ng-enter-stagger {
        /* this will have a 100ms delay between each successive enter animation */
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;

        /* in case the stagger doesn't work then these two values
         must be set to 0 to avoid an accidental CSS inheritance */
        -webkit-transition-duration: 0s;
        transition-duration: 0s;
    }
</style>
<script>
    angular.module('App', ['ngAnimate']);

</script>
<body  ng-app="App" ng-init="users=['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];">

<div class="container">
    <h2>AngularJS List / ng-animate with stagger</h2>

    <form class="form-search">

        <!--INPUT TEXT-->
        <div class="input-append">
            <input type="text" ng-model="search"
                   placeholder="Search user"
                   class="form-control" >
        </div>

        <!--LIST-->
        <ul class="example-animate-container">
            <li class="animate-repeat"
                ng-repeat="user in users | filter:search">
                <a href="#"> {{user}} </a>
            </li>
        </ul>

    </form>
</div>
</body>